@charset "utf-8";
@grayColor:#f7f7f8;
@redColor:#b01517;
@whiteColor:#fff;
.position(r){position:relative;}
.position(a){position:absolute;}
.fl(l){float:left;}
.fl(r){float:right;}
.pull-left{float:left;}
.pull-right{float:right;}
.dis(inline){display:inline;}
.dis(block){display:block;}
.dis(i-b){display:inline-block;}
a:hover{text-decoration:none;color:inherit;}
.bg(@color){
    background-color:@color;
}
/*正中*/
.middle(){
    left:0;right:0;top:0;bottom:0;margin:auto;
}
/*右中*/
.r-c(){
    right:0;top:0;bottom:0;margin:auto;
}
/*左中*/
.l-c(){
    left:0;top:0;bottom:0;margin:auto;
}
/*上中*/
.t-c(){
    right:0;top:0;left:0;margin:auto;
}
/*下中*/
.b-c(){
    right:0;left:0;bottom:0;margin:auto;
}
.clearfix{
    zoom:1;
    &:after{
        display:block;
        content:"";
        clear:both;
    }
}
body{
    background-color:@grayColor;.position(r);
}
.main-body{width:98%;background-color:@whiteColor;margin:auto;}
.wrapper{
    width:95%;margin:auto;
}
/*top-part*/
.top{width:100%;background-color:@whiteColor;padding:15px 0;}
.greeting{
   padding-top:30px;
}
.logo-pic{width:77px;}
.bookBuyerSystem{font-size:30px;padding:22px 0 0 18px;}
.menu{
    li i{
        .dis(i-b);
        width:22px;
        height:25px;
        vertical-align:middle;
        margin-right:11px;
    }
    .@{user} i{
            background:url("@{bgImg}/user.png") no-repeat;
        }
    .@{home} i{
            background:url("@{bgImg}/home.png") no-repeat;
        }
    .@{task} {
        color:@redColor;
        i{
         background:url("@{bgImg}/tip.png") no-repeat;
        }
        -webkit-animation:twinkle 0.3s infinite;   
        animation:twinkle 0.3s infinite;
    }
}
@user:user;
@home:home;
@task:task;
@bgImg:'../img';
/*--navMenu--*/
.nav{
      background-color:@redColor;
    .nav-menu>li{
        .fl(l);
        .position(r);
        border-bottom:2px solid transparent;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -ms-transition:all 0.3s ease;
        transition:all 0.3s ease;
        .sub-nav,.sub-nav-2{
            .position(a);
            background-color:#e9e9e9;
            min-width:135px;
            width:100%;
            top:101%;
            display:none;
            z-index:111;
            -webkit-transition:all 0.3s ease-in;
            -moz-transition:all 0.3s ease-in;
            -ms-transition:all 0.3s ease-in;
            transition:all 0.3s ease-in;
        }
        &.active,&:hover{
            border-bottom:2px solid @whiteColor;
            &>a:after{
                .dis(block);
                .position(a);
                content:" ";
                bottom:-3px;
                width:0px;
                height:0px;
                border-color:transparent transparent @whiteColor;
                border-style:solid;
                border-width:5px;
                .b-c();
            } 
        }
        &:hover{
           &>.sub-nav{
                    display:block;
                }
        }
        &>a{
            .dis(i-b);
            padding:15px 19px;
            font-size:18px;
            .position(r);
            color:white;
        }
        &>.sub-nav,.sub-nav-2{
             li{
                .position(r);
                padding:10px 5px;
                & a{
                color:#777;
                padding:0 5px;
                }
                &:hover{
                    background-color:@redColor;
                    &>a{color:@whiteColor;}
                    .sub-nav-2{
                        display:block;
                    }
                }
                & a span{.fl(r);}
            }
        }
        .sub-nav-2{
            left:100%;width:100%;top:0;
        }
    }
}
/*main*/
.query-opition{
    margin:40px 0;padding:20px 0 0;
    .opition-list li{
        margin-bottom:20px;
        height:40px;
        .form-control{
            .dis(i-b);
            &.search-book{width:65.5%;margin-left:-5px;}
            }
        }
//      .col-md-4{padding:0;}
        
    }
.table{
    width:100%;
    background-color:#dcddde;
    margin:0;
//  table-layout:fixed;
    &>thead>tr>th{
        background-color:#f7f7f8;
        font-weight:bold;
    }
    &>tbody>tr>td,&>thead>tr>th{
        height:30px;
        vertical-align:middle;
        text-align:center;
    }
    &>tbody>tr>td{
        .position(r);
        border-color:transparent #ddd transparent;
        &.text-left{
            text-align:left;
        }
        .red{color:@redColor;}
        ul.detail-ifm{
            .position(a);
            background-color:@whiteColor;
            border: 1px solid @redColor;
            left: 7%;
            padding: 5px;
            line-height: 24px;
            top: 100%;
            z-index: 1111;
            &:after{
                
                .dis(block);.position(a);content:"";
                width:14px;height:6px;background:url(../img/arrow.png) no-repeat;.t-c();top:-6px;
            }
            & li a:hover{color:@redColor;}
        }
    }
}
.table-striped>tbody>tr:nth-of-type(odd){
    background-color:white;
}
.table-striped>tbody>tr:nth-of-type(even){
    background-color:#f9f9f9;
}
.edit-table{
    background-color:@whiteColor;
    &.table > tbody > tr > td{
        border-color:transparent #ddd #ddd transparent;
    }
    }
/*用户角色与权限-开始*/
.edit-dialog-table{
    width:80%;margin:auto;
    .btn-danger{
        margin-right:20px;
    }
}
.edit,.set{cursor:pointer;}
/*用户角色与权限-结束*/
/*Width*/
.w317{width:317px;}
.w50{width:70px;}
.third{width:27%;}
.w-p80{width:80%;}
.half-select{width:40%;}
.w45{width:45px;}
.w220{width:218px;}
.w100{width:100px;}
.w80{width:80px;}
/*width-end*/
.tit{
    display:inline-block;
    width:60px;
    text-align:center;
    font-size:14px;
    vertical-align:middle;
    height:34px;line-height:34px;
}
.search-book+.select2-container{width:30%;margin-left:-5px;}
.select2{margin:-6px 0 0;}
.left-minus-5+.select2-container--default .select2-selection--single .select2-selection__rendered{margin-left:-5px;}
.left-minus-5+.select2-container--default .select2-selection--single .select2-selection__arrow b{
    left:5px;
}
.left-minus-10+.select2-container--default .select2-selection--single .select2-selection__rendered{margin-left:-10px;}
.left-minus-10+.select2-container--default .select2-selection--single .select2-selection__arrow b{
    left:-2px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
.btn{
    border-radius:0;outline:none;
    &-export{
        margin-right:15px;
    }
}
/*查询结果*/
.result-container{
    margin:50px 0 0;
    padding:15px 15px 20px;
    .bg(white);
    .explanation{
        padding:0 0 15px;
    }
}
.breadcrumb{
    padding: 8px 0 8px 20px;
    margin-bottom:0;
    background:@whiteColor url(../img/eye.png) no-repeat left;
    &>li{
        label{margin-bottom:0;}
        .dis(i-b);
        font-size:14px;
         color: #858585;
        &+:before {
            content: ">\00a0";
        }
    }
}
.tip{
    &-icon{
    .dis(i-b);
    margin-right:20px;
    width:35px;height:35px;vertical-align:middle;
    &.search-icon{
        background:url(../img/search.png) no-repeat;
        }
     &.none-icon{
        background:url(../img/error.png) no-repeat;
        }
    }
    &-txt{
        color:#bbb;
    }    
}
/*弹窗*/
.modal{
    &-bg{height:100%;background:#000;opacity:.4;filter: alpha(opacity=40);}
    &-title{background-color:#f8f7f6;color:#777;padding:5px 15px;font-size:16px;}
    &-dialog{
        position:absolute;
        .middle();
        &.tip-modal{
            height:280px;
        }
        &.edit-modal{
            height:90%;width:80%;
        }
    }
    &-close{
        .dis(block);
        width:20px;height:20px;background:url(../img/close.png) no-repeat;cursor:pointer;
    }
    &-tag{
        width:60%;font-size:16px;margin:50px auto;line-height:30px;
    }
    &-btn .btn-danger{
        margin-right:20px;
    }
}
/*弹窗结束*/
/*登录页开始*/
.login{
    &-container{
    width:916px;height:518px;margin:60px auto;
    }
    &-title{
        color:@whiteColor;background-color:@redColor;height:77px;line-height:77px;padding-left:15px;font-size:26px;margin:0;
    }
    &-box{
        background:white url(../img/line.png) no-repeat 46% 70px;height:441px;padding:70px 40px;
    }
    &-table{
        tr{height:34px;}
    }
}
.logo-img{
        width:183px;margin:auto;
    }
.slogan{color:#666;font-size:26px;font-weight:bold;margin-top:20px;}
.txt-label{
    padding-right:15px;.position(r); 
    i{
        .dis(i-b);;width:20px;height:20px;vertical-align:middle;margin-right:10px;
    }
}
.logo-dl{width:318px;}
.login-form{
    width:394px;padding-top:33px;
    .form-control{width:300px;}
}
.form-control{border-radius:0;}
.user-name i{background:url(../img/user-name.png) no-repeat;}
.pwd i{background:url(../img/pwd.png) no-repeat;}
.white{color:white;}
.remember{
    .checkbox-inline input[type=checkbox]{
        display:none;
        &+span{
           font-size:16px;
           &:after{
            .dis(i-b);content:"";.position(a);
            width:16px;height:16px;border:1px solid #ccc;.l-c();
            }
        }
         &:checked+span:after{
            border:1px solid @redColor;
            content:"\2713";line-height:16px;color:@redColor;
        }
    }
    .tip{font-size:12px;padding-top:5px;}
}
.btn-danger {
    background-color: #b12221;
}
.btn-login{width:100%;}
/*登录页结束*/
/*动画*/
@-webkit-keyframes twinkle {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  25% {
    opacity: 0.9;
    filter: alpha(opacity=90);
  }
  50% {
    opacity: 0.7;
    filter: alpha(opacity=70);
  }
  75% {
    opacity: 0.9;
    filter: alpha(opacity=90);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@-moz-keyframes twinkle {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  25% {
    opacity: 0.9;
    filter: alpha(opacity=90);
  }
  50% {
    opacity: 0.7;
    filter: alpha(opacity=70);
  }
  75% {
    opacity: 0.9;
    filter: alpha(opacity=90);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@-o-keyframes twinkle {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  25% {
    opacity: 0.9;
    filter: alpha(opacity=90);
  }
  50% {
    opacity: 0.7;
    filter: alpha(opacity=70);
  }
  75% {
    opacity: 0.9;
    filter: alpha(opacity=90);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@keyframes twinkle{
    0%{
      opacity:1;
      filter: alpha(opacity=100); 
    }
    25%{
      opacity:0.9;
      filter: alpha(opacity=90);
    }
    50%{
      opacity:0.7;
      filter: alpha(opacity=70); 
    }
    75%{
      opacity:0.9;
      filter: alpha(opacity=90);
    }
    100%{
      opacity:1;
      filter: alpha(opacity=100); 
    }
}
